<template>
	<view class="container">
		<view class="border-body">
			<view class="body_pos_re">
				<text class="body_pos_tit">收货人</text>
				<view class="body_pos_right">
					<u-input border="none" class="body_phone_input" placeholder="请输入收货人"
						placeholderClass="input-placeholder" type="text" clearable v-model="form.consignee"></u-input>
				</view>
			</view>
			<view class="body_pos_re">
				<text class="body_pos_tit">手机号码</text>
				<view class="body_pos_right">
					<u-input border="none" class="body_phone_input" placeholder="请输入手机号码"
						placeholderClass="input-placeholder" type="text" clearable v-model="form.mobile"></u-input>
				</view>
			</view>
			<view class="body_pos_re">
				<text class="body_pos_tit">所在地区</text>
				<view class="area-container" @tap="openAddres()">
					<view class="text grey-text" v-if="form.province!='' && form.city!='' && form.district!=''">
						{{form.province+' '+form.city+' '+form.district}}
					</view>
					<view class="text" v-else>请选择所在地区</view>
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/user/sh-dizhi.png" mode="widthFix" class="area-img"></image>
				</view>
			</view>
			<view class="body_pos_re body_pos_textarea">
				<text class="body_pos_tit">详细地址</text>
				<view class="body_pos_right">
					<u-textarea padding="20rpx 0" border="none" class="form-row-textarea"
						placeholderClass="input-placeholder" v-model="form.address" placeholder="请输入详细地址"></u-textarea>
				</view>
			</view>
			<view class="body_pos_re body_pos_default" @click="changeDefault">
				<text class="body_pos_tit">设置为默认收货地址</text>
				<image :src="form.is_default==1?'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/dz-checkbox-sel.png':'https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/common/dz-checkbox.png'"
					mode="widthFix" class="checkbox-img"></image>
			</view>
		</view>
		<button type="default" @click="Submit" class="body_btn2">确认</button>
		<view class="delete" v-if="form.address_id">
			<text @click="openConfirm">删除地址</text>
		</view>
		<my-address ref="simpleAddress" :getUrl="addressUrl" :pickerValueDefault="cityPickerValueDefault"
			@onConfirm="onConfirm" themeColor="#37BB49" cancelColor="#080524"></my-address>
		<u-popup :safeAreaInsetBottom="false" :safeAreaInsetTop="false" mode="center" :show="show" round="5"
			:overlay="true" :customStyle="customStyle1" @close="show=false">
			<view class="u-popup-slot">
				<text class="u-popup-slot_text">确认删除？</text>
				<view class="u-popup-slot_flex">
					<button @click="show = !show" class="cancel">取消</button>
					<button @click="deleteaddress()" class="confirm">确认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var validate = require("@/components/validate/validate.js");
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	var _this;
	export default {
		data() {
			return {
				customStyle1: {
					'width': '80%'
				},
				show: false,
				form: {
					address_id: 0,
					consignee: '',
					mobile: '',
					pid: 0,
					cid: 0,
					did: 0,
					province: '',
					city: '',
					district: '',
					address: '',
					is_default: 0
				},
				cityPickerValueDefault: [0, 0, 0],
				checked: false,
				is_cart: 0
			}
		},
		onLoad(option) {
			_this = this
			if (option.id != undefined) {
				uni.setNavigationBarTitle({
					title: '编辑收货地址'
				})
				this.form.address_id = option.id
				this.getaddress()
			}
		},
		components: {
			simpleAddress
		},
		methods: {
			openConfirm() {
				this.show = true
			},
			changeDefault() {
				this.form.is_default = this.form.is_default == 0 ? 1 : 0
			},
			//获取地址数据
			async getaddress() {
				const params = {
					address_id: this.form.address_id
				}
				const data = await _this.$post('api/Address', params)
				if (data.code == 200) {
					this.form.consignee = data.data.address.consignee
					this.form.mobile = data.data.address.mobile
					this.form.pid = data.data.address.pid
					this.form.cid = data.data.address.cid
					this.form.did = data.data.address.did
					this.form.province = data.data.address.province
					this.form.city = data.data.address.city
					this.form.district = data.data.address.district
					this.form.address = data.data.address.address
					this.form.is_default = data.data.address.is_default
					if (data.data.address.is_default == 1) {
						this.checked = true
					} else {
						this.checked = false
					}
				} else {
					uni.$u.toast(data.msg)
					setTimeout(() => {
						uni.navigateBack({})
					}, 2000)
				}
			},
			async Submit() {
				var rule = [{
					// 字段名
					name: 'consignee',
					rules: ['require'],
					errorMsg: {
						require: '请填写收货人',
					}
				}, {
					// 字段名
					name: 'mobile',
					rules: ['require', 'mobile'],
					errorMsg: {
						require: '请输入手机号码',
						mobile: '手机号码格式有误',
					}
				}, {
					// 字段名
					name: 'province',
					rules: ['require'],
					errorMsg: {
						require: '请选择省份',
					}
				}, {
					// 字段名
					name: 'city',
					rules: ['require'],
					errorMsg: {
						require: '请选择城市',
					}
				}, {
					// 字段名
					name: 'district',
					rules: ['require'],
					errorMsg: {
						require: '请选择地区',
					}
				}, {
					// 字段名
					name: 'address',
					rules: ['require'],
					errorMsg: {
						require: '请输入详细地址',
					}
				}];
				// 是否全部通过，返回Boolean
				let checked = validate.check(this.form, rule);
				if (!checked) {
					// 获取错误信息
					let err = validate.getError();
					uni.$u.toast(err[0])
					return;
				}
				const data = await _this.$post('api/SaveAddress', this.form)
				if (data.code == 200) {
					uni.$u.toast(data.msg)
					setTimeout(() => {
						uni.navigateBack({})
					}, 2000)
				} else {
					uni.$u.toast(data.msg)
				}
			},
			openAddres() {
				this.cityPickerValueDefault = [this.form.pid, this.form.cid, this.form.did]
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				this.form.province = e.labelArr[0]
				this.form.city = e.labelArr[1]
				this.form.district = e.labelArr[2]
				this.form.pid = e.provinceCode
				this.form.cid = e.cityCode
				this.form.did = e.areaCode
			},
			//删除收货地址
			async deleteaddress() {
				const params = {
					address_id: this.form.address_id,
				}
				const data = await _this.$post('api/DelAddress', params)
				if (data.code == 200) {
					uni.$u.toast(data.msg)
					setTimeout(() => {
						uni.navigateBack({})
					}, 2000)
				} else {
					uni.$u.toast(data.msg)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 30rpx 0 30rpx;

		.border-body {
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 0 30rpx;
			margin-bottom: 20rpx;

			.body_pos_re {
				box-sizing: border-box;
				@include flex-box(row, null, center);
				padding: 20rpx 0;

				.body_pos_tit {
					width: 24%;
					font-size: 30rpx;
					font-weight: 500;
				}

				.body_pos_right {
					padding: 0 20rpx;
					flex: 1;
					min-height: 80rpx;
					background: $bg-F7F7F7;
					@include flex-box(row, null, center);
					border-radius: 12rpx;

					.form-row-textarea {
						background: none;
					}
				}

				.body_phone_input {
					flex: 1;
				}

				.area-container {
					flex: 1;
					@include flex-box(row, null, center);
					background: $bg-F7F7F7;
					height: 80rpx;
					border-radius: 12rpx;
					padding: 0 20rpx;

					.text {
						flex: 1;
						font-size: 28rpx;
						color: $color-919191 !important;
					}

					.grey-text {
						color: $color-080524 !important;
					}
				}

				.area-img {
					width: 34rpx;
				}

				.checkbox-img {
					width: 50rpx;
				}

				.border-body2_flex {
					display: flex;
				}

				.border-body2_text1 {
					margin-left: 10rpx;
				}
			}

			.body_pos_textarea {
				.body_pos_tit {
					align-self: flex-start;
				}
			}

			.body_pos_default {
				justify-content: space-between;

				.body_pos_tit {
					width: auto;
				}
			}
		}

		.body_btn2 {
			width: 100%;
			height: 80rpx;
			font-size: 28rpx;
			border-radius: 60px;
			margin-top: 60rpx;
			color: #fff;
			background-color: $theme-color;
			line-height: 81rpx;
		}
	}

	.delete {
		width: 100%;
		margin-top: 20rpx;
		text-align: center;
		font-size: 28rpx;
		color: #A5A5A5;
	}

	/deep/.input-placeholder {
		font-size: 28rpx;
		color: $color-919191 !important;
	}
</style>